import React from 'react'
import { Button, Modal, Stack } from 'react-bootstrap'
import { useBudgets, NOCLASS } from '../context/BudgetsContext';
import { currencyFormatter } from '../utils';

export default function ViewExpensesMotal({handleCloce, budgetId}) {
    
    const {budgets, getBudgetExpenses, deleteBudget, deleteExpense} = useBudgets();
    const budget = budgetId === NOCLASS ? {name: "未分类", id: NOCLASS}: budgets.find(b => b.id ===budgetId);
    const expenses = getBudgetExpenses(budgetId);

    return (
        <Modal show = {budgetId != null} onHide = {handleCloce}>
                <Modal.Header closeButton>
                    <Modal.Title>
                        <Stack direction='horizontal' gap={2}>
                            <div>Expenses - {budget?.name}</div>
                            {budgetId !== NOCLASS &&(
                                <Button variant='outline-danger' onClick={() => {
                                    deleteBudget(budgetId);
                                    handleCloce()
                                }}>Delete</Button>
                            )}
                        </Stack>
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Stack direction='vertical' gap={3}>
                        {expenses.map(expense =>(
                            <Stack direction='horizontal' gap={2} key={expense.id}>
                                <div className='me-auto fs-4'>{expense.description} </div> 
                                <div className='fs-5'>{currencyFormatter.format(expense.amount)} </div>
                                <Button size='sm' variant='outline-danger' onClick={()=>deleteExpense(expense.id)}>&times;</Button>
                            </Stack>    
                        ))}
                    </Stack>
                </Modal.Body>
        </Modal>
    )
}
